<template>
  <div>
    <el-popover
      placement="bottom"
      width="481"
      trigger="hover">
      <div class="site-panel">
        <div class="site-panel-setting">
          <div class="panel-setting-mine">我的店铺</div>
          <el-button class="panel-setting-add" v-hasPermi="['store:site:add']" type="primary" :loading="loading" @click="handleAdd">创建店铺</el-button>
        </div>
        <div class="site-panel-site"
             :style="siteList.length === 1 ?'height: 170px;':siteList.length ===2 ?'height: 320px;':'height: 470px;'">
          <el-scrollbar class="panel-site-scrollbar" :native="false" :noresize="false" tag="section">
            <el-card class="panel-site-index" shadow="hover" v-for="(item,index) in siteList"
                     @click.native="changeCurrentSite(item)">
              <div class="index-block">
                <div class="block-message">
                  <el-avatar src="" @error="errorHandler">
                    <img :src="item.logo" class="message-avatar">
                  </el-avatar>
                  <div class="message-name">{{ item.name }}</div>
                </div>
                <div class="block-edition">
                  当前版本：{{ editionFormat(item) }}
                </div>
              </div>
              <div :class="item.mainStatus === '1'?'index-remove':'index-remove index-cant-remove'">
                <svg-icon slot="prefix" icon-class="xy-site-delete" v-hasPermi="['store:site:remove']" @click="handleDelete(item)"/>
              </div>
            </el-card>
            <div class="panel-site-fill"/>
          </el-scrollbar>
        </div>
      </div>
      <div class="logo-wrapper" slot="reference">
        <el-avatar src="" @error="errorHandler">
          <img :src="siteIndex===undefined ? '' : siteIndex.logo" class="logo-avatar">
        </el-avatar>
        <div class="logo-name">{{ siteIndex===undefined ? '暂无可用站点' : siteIndex.name }}</div>
      </div>
    </el-popover>


  </div>
</template>

<script>
import {addStore, delStore, listStore} from "@/api/mall/store/site";

export default {
  name: "SiteBlock",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 商城-站点(当前使用)
      siteIndex: undefined,
      // 商城-站点数据
      siteList: [],
      // 商城类型字典
      typeOptions: [],
      // 商城版本字典
      editionOptions: [],
      // 查询|新建参数
      queryParams: {
        name: '新建站点',
        siteId: 0,
        systemId: this.$store.state.settings.systemId,
      },
    };
  },
  created() {
    this.getList();
    this.getDict();
  },
  methods: {
    /** 查询商城-站点模块列表 */
    getList() {
      this.queryParams.siteId = this.$store.state.settings.siteId
      listStore(this.queryParams).then(response => {
        this.siteList = response.data;
        if (this.siteList.length > 0) {
          this.siteIndex = this.siteList[0]
          this.updateSiteId(this.siteIndex.siteId);
        }
      });
    },
    getDict() {
      this.getDicts("sys_mall_type").then(response => {
        this.typeOptions = response.data;
      });
      this.getDicts("sys_mall_edition").then(response => {
        this.editionOptions = response.data;
      });
    },
    //更新siteId并保存至缓存
    updateSiteId(val){
      this.$store.dispatch('settings/changeSetting', {
        key: 'siteId',
        value: val
      });
      localStorage.setItem(
        "site-setting",
        `{
            "siteId":${val}
          }`
      );
    },
    changeCurrentSite(item) {
      this.updateSiteId(item.siteId);
      this.getList();
      // this.$router.go(0);
    },
    // 商城类型字典翻译
    typeFormat(item) {
      return this.selectDictLabel(this.typeOptions, item.type);
    },
    // 商城版本字典翻译
    editionFormat(item) {
      return this.selectDictLabel(this.editionOptions, item.edition);
    },
    errorHandler() {
      return true
    },
    /** 新增店铺操作 */
    handleAdd(){
      this.loading = true;
      addStore(this.queryParams).then(response => {
        this.msgSuccess("新增成功");
        this.getList();
        this.loading = false;
      });
    },
    /** 删除按钮操作 */
    handleDelete(item){
      this.$confirm('是否确认删除店铺"' + item.name + '"吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delStore(item);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.logo-wrapper {
  margin-top: 12px;
  position: relative;

  .logo-avatar {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .logo-name {
    float: right;
    height: 42px;
    line-height: 42px;
    font-size: 12px;
    text-align: left;
    margin-left: 10px;
    margin-right: 50px;
  }
}

.site-panel {
  .site-panel-setting {
    height: 54px;

    .panel-setting-mine {
      float: left;
      line-height: 42px;
    }

    .panel-setting-add {
      float: right;
    }
  }

  .site-panel-site {
    background-color: #f1f1f1;

    .panel-site-scrollbar {
      height: 100%;

      .panel-site-fill {
        height: 20px;
        background: #f1f1f1;
      }

      .panel-site-index {
        width: 415px;
        height: 130px;
        margin: 20px 20px 0 20px;
        background-color: #ffffff;
        cursor: pointer;

        .index-block {
          float: left;

          .block-message {
            margin-top: 12px;
            position: relative;

            .message-avatar {
              cursor: pointer;
              width: 40px;
              height: 40px;
              border-radius: 10px;
            }

            .message-name {
              float: right;
              height: 42px;
              line-height: 42px;
              text-align: left;
              margin-left: 10px;
              margin-right: 50px;
            }
          }

          .block-edition {
            width: 149px;
            height: 33px;
            line-height: 33px;
            text-align: center;
            color: #b2b2b2;
            background-color: #f1f1f1;
            margin-top: 10px;
          }
        }

        .index-remove {
          margin-right: 10px;
          float: right;
          line-height: 100px;
        }

        .index-cant-remove {
          cursor: not-allowed;
        }
      }
    }
  }
}
</style>

<style scoped>
.site-panel-site >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
